import React from 'react'
import { Button, Form, Input, Space, Card, Table, Tooltip } from 'antd'
import type { ColumnsType } from 'antd/es/table'

import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

// columns这个数组决定了表格的列

const columns: ColumnsType<DataType> = [
  {
    // title决定了这一列的标题
    title: '序号',
    // 如果写了render,则dataIndex只决定了render函数的第一个参数
    // 如果不写render,则dataIndex决定了这一列渲染什么数据
    // dataIndex: 'name',
    // key: 'name', // key是每一列数据的key值(没用)
    // 如果写了render,则render函数的返回值,决定了这一列渲染什么数据
    render: (a, b, c) => {
      // console.log(a, b, c)

      // 表格渲染几条数据,则render执行几次
      // a的值会变化. a的值受dataIndex属性的影响. 没写dataIndex,则a和b是一样的.如果写的dataIndex,则a的值就是dataIndex后面写的对应的属性的值
      // b的值不变, 永远是表格渲染的数据
      // c的值不变, 永远是表格渲染的数据的下标

      return c + 1
    },

    align: 'center', // 让这一列的内容水平居中
    width: 80, // 控制这一列的宽度.单位是px
  },
  {
    title: '医院名称',
  },
  {
    title: '医院编号',
  },
  {
    title: 'api基础路径',
  },
  {
    title: '签名',
  },
  {
    title: '联系人名称',
  },
  {
    title: '联系人手机号',
  },
  {
    title: '操作',
    render() {
      return (
        <Space>
          <Tooltip title="修改医院">
            <Button icon={<EditOutlined />} type="primary"></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button icon={<DeleteOutlined />} danger type="primary"></Button>
          </Tooltip>
        </Space>
      )
    },

    width: 100,
    fixed: 'right', //这一列固定到右侧
  },
]

// data是dataSource的值,决定了表格渲染的数据(未来会删除)
const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

export default function HospitalSet() {
  // 有表单校验的时候,则表单校验通过才触发.没有表单校验的时候,只要点击了提交按钮就直接触发
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }
  return (
    <Card>
      <Form
        // layout="inline" 表示让表单中的每一个表单元素在一行显示.放不下会自动换行
        layout="inline"
        name="basic" // 表单的名称,用于区分表单
        // antd中默认进行了栅格布局.一行分为了24份
        // labelCol代表了表单中的提示文本部分. span表示在一行中占多少份
        // labelCol={{ span: 2 }}
        // wrapperCol代表了表单中的表单元素部分
        // wrapperCol={{ span: 22 }}
        // 设置表单中指定表单元素的初始值
        // remember：true。 表示将name属性值为remember的表单元素初始值设置为true
        // initialValues={{ remember: true }}
        // 点击了表单的提交按钮,如果表单校验通过了,则触发onFinish
        onFinish={onFinish}
        // 点击了表单的提交按钮,如果表单校验不通过了,则触发onFinishFailed
        // onFinishFailed={onFinishFailed}
        // autoComplete="off"
      >
        {/* antd的表单中的表单元素应该被Form.Item包裹,目的是为了方便控制表单元素 */}
        <Form.Item
          // label决定了当前表单元素的提示文本
          // label="嘻嘻嘻"
          // 表单元素的name
          name="hosname"
          // 设置当前表单元素的校验规则
          // required:true表示当前表单元素为必填项
          // message是当表单校验不通过时的提示信息
          // rules={[{ required: false, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item
          name="remember"
          // Form.Item默认控制包裹的表单元素的value属性. valuePropName="checked" 表示,当前表单元素应该控制的是checked属性
          valuePropName="checked"
          // offset表示当前表单元素的左偏移量
          wrapperCol={{ offset: 0, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item>
          {/* Space可以给它所包裹的组件添加间隔距离 */}
          <Space>
            {/* Button的type为primary就是这事一个主题颜色按钮 */}
            {/* htmlType="submit" 表示当前按钮是当前表单的提交按钮 */}
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button>清空</Button>
          </Space>
        </Form.Item>
      </Form>

      <Space style={{ marginTop: 20, marginBottom: 20 }}>
        <Button type="primary">添加</Button>
        <Button type="primary" danger disabled>
          批量删除
        </Button>
      </Space>

      {/* 
      
      columns决定了一个表格有几列 
      dataSource 决定了表格中渲染的数据 
      bordered 给表格添加边框
      rowSelection 让表格渲染复选框
      scroll表示展示滚动条. x表示水平方向. 1500单位是px.表示滚动距离
      
      */}
      <Table
        columns={columns}
        dataSource={data}
        bordered
        rowSelection={{}}
        scroll={{ x: 1500 }}
      />
    </Card>
  )
}
